import React, { Component } from 'react'
// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle'

// import styles bundle
import 'swiper/css/bundle'

import './css/index.css'

export default class App extends Component {
  state = {
    list: [],
  }

  componentDidMount() {
    console.log('componentDidMount')

    setTimeout(() => {
      this.setState(
        {
          list: ['11', '22', '33', '44', '55', '66', '77', '88', '99'],
        },
        () => {
          console.log('componentDidMount:setState')
          new Swiper('.swiper', {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        }
      )
    }, 1000)

    // 异步 不好使
    // new Swiper('.swiper', {
    //   loop: true, // 循环模式选项

    //   // 如果需要分页器
    //   pagination: {
    //     el: '.swiper-pagination',
    //   },

    //   // 如果需要前进后退按钮
    //   navigation: {
    //     nextEl: '.swiper-button-next',
    //     prevEl: '.swiper-button-prev',
    //   },

    //   // 如果需要滚动条
    //   scrollbar: {
    //     el: '.swiper-scrollbar',
    //   },
    // })
  }

  // componentDidUpdate(prevProps, prevState) {
  //   console.log('componentDidUpdate')
  //   new Swiper('.swiper', {
  //     loop: true, // 循环模式选项

  //     // 如果需要分页器
  //     pagination: {
  //       el: '.swiper-pagination',
  //     },

  //     // 如果需要前进后退按钮
  //     navigation: {
  //       nextEl: '.swiper-button-next',
  //       prevEl: '.swiper-button-prev',
  //     },

  //     // 如果需要滚动条
  //     scrollbar: {
  //       el: '.swiper-scrollbar',
  //     },
  //   })
  // }

  render() {
    console.log('render')
    return (
      <>
        <div className='swiper'>
          <div className='swiper-wrapper'>
            {this.state.list.map((item) => (
              <div
                className='swiper-slide'
                key={item}
              >
                {item}
              </div>
            ))}
          </div>
          {/* 如果需要分页器 */}
          <div className='swiper-pagination'></div>

          {/* 如果需要导航按钮  */}
          <div className='swiper-button-prev'></div>
          <div className='swiper-button-next'></div>

          {/* 如果需要滚动条 */}
          <div className='swiper-scrollbar'></div>
        </div>
      </>
    )
  }
}
